@extends('home.layouts.auth')
@section('title')
   忘记密码
@endsection

@section('css')
    <style>
        .mdui-textfield {
            padding-top: 0;
        }

        .auth-goto {
            margin-bottom: 10px;
            padding-top: 50px;
            color: #333;
            font-size: 16px;
        }

        .auth-third {
            margin-top: 80px;
        }

        .auth-third .hd {
            height: 16px;
            font-size: 12px;
            text-align: center;
        }

        .auth-third .hd .layout-inner {
            margin-bottom: 7px;
            border-bottom: 2px solid #f2f2f2;
        }

        .auth-third .hd h3 {
            width: 106px;
            margin: 0 auto -8px;
            background-color: #fff;
            font-weight: 400;
            line-height: 16px;
            color: #ccc;
        }

        .auth-third .links {
            margin: 0 auto;
            padding-top: 20px;
        }

        .auth-third .links a {
            display: inline-block;
            margin: 0 8px;
        }

        .auth-icon {
            background-image: url("{{asset('/images/fouricon.png')}}");
            background-size: 298px 120px;
        }

        .icon-tencent, .icon-weibo, .icon-weixin {
            width: 55px;
            height: 55px;
            background-position: 0 -65px;
        }

        .auth-third a:hover .icon-tencent {
            background-position: 0 -1px;
        }

        .auth-third .icon-weibo {
            background-position: -81px -65px;
        }

        .auth-third a:hover .icon-weibo {
            background-position: -81px -1px
        }

        .auth-third .icon-weixin {
            background-position: -162px -65px;
        }

        .auth-third a:hover .icon-weixin {
            background-position: -162px -1px
        }

        .auth-icon {
            display: inline-block;
            vertical-align: middle;
            background-repeat: no-repeat;
        }
    </style>
@endsection

@section('left')
    <form action="{{url('/home/new_password')}}" class="mdui-p-x-3" method="post" id="forget-form">
        {{csrf_field()}}
        <div class="mdui-textfield mdui-textfield-floating-label">
            <label class="mdui-textfield-label">手机号</label>
            <input id="phone" class="mdui-textfield-input" type="text" name="user" value=""/>
            <div class="mdui-textfield-error">请输入正确手机号</div>
            @if(count($errors) > 0)
                <div class="alert alert-danger">{{$errors->first('phone')}}</div>
            @endif
        </div>

        <div class="mdui-textfield mdui-textfield-floating-label ">
            <div class="mdui-row">
                <div class="mdui-col-xs-7">
                    <label class="mdui-textfield-label">手机验证码</label>
                    <input id="code" class="mdui-textfield-input" type="text" name="code"/>
                    <div class="mdui-textfield-error">请输入手机验证码</div>

                </div>
                <div class="mdui-col-xs-5 mdui-text-right">
                    <label class="mdui-textfield-label">&nbsp;</label>
                    <a id="send-recode" name="captcha"
                            class="mdui-btn mdui-btn-block mdui-color-theme mdui-ripple">获取验证码</a>
                </div>
            </div>
        </div>
        <button  class="mdui-btn
        mdui-btn-block mdui-color-theme mdui-ripple mdui-m-t-2 mdui-m-b-1">找回密码
        </button>
    </form>
@endsection

@section('right')
    <div class="auth-goto">
        <p class="mdui-text-center mdui-typo">
            <span>已有账号</span>
            <a href="{{url('/login')}}">立即登录</a>
        </p>
    </div>
    <div class="auth-third">
        <header class="hd">
            <div class="layout-inner">
                <h3>快速登录</h3>
            </div>
        </header>
        <div class="links mdui-text-center">
            <a href="{{url('/connect/qq')}}">
                <i class="auth-icon icon-tencent"></i>
            </a>
            <a href="{{url('/oauth/weibo')}}">
                <i class="auth-icon icon-weibo"></i>
            </a>
            <a href="{{url('/connect/weixin')}}">
                <i class="auth-icon icon-weixin"></i>
            </a>
        </div>
    </div>
@endsection
@section('js')
    <script>
        //增加手机验证码的判断 id="send-code"
        //添加一个判断的标识flag
        var flag=true;

        $("#send-recode").click(function() {
            if (flag == false) {
                return false;
            }
            //获取用户填入的信息
            var user = $("input[name=user]").val();
            console.log(user);
            console.log($(this));
            //判断信息类型
           if(!isNaN(user))
           {
               console.log('user是数字');
               return false;
               //判断手机号是否为空
               if(user==''){
                   alert("手机号不能为空");
                   return;
               }
               flag=false;
               var num=60;
               //添加一个定时器
               var timer=setInterval(function(){
                   $("#send-recode").html(num+'s后重新发送');
                   if(num == 0){
                       flag=true;
                       clearInterval(timer);
                       $("#send-recode").html('重新发送');
                   }
                   num--;
               },1000);
               //ajax请求路由,来发送手机短信验证码
               $.ajax({
                   url:'{{url('/home/sendreset')}}',
                   dataType:'json',
                   data:{phone:user},
                   success:function (data) {
                       if (data == null) {
                           alert('服务器繁忙');
                           return;
                       }
                       if (data.status != 0) {
                           alert(data.message);
                           return;
                       }
                       alert('发送成功');
                   },
                   error:function (xhr, status, error) {
                       console.log(xhr);
                       console.log(status);
                       console.log(error);
                   }
               });
           }else{
               console.log('user不是数字');
               console.log(user);
               //判断邮箱是否合法
               var preg = regex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;
               if(preg.test(user) == false)
               {
                   alert("邮箱格式不正确");
                   return false;
               }else{
                   //进行邮箱验证
                   //调整按钮属性
                   console.log($(this));
                   $(this).addClass('disabled');
                   flag=false;
                   //发送验证码
                   var num=60;
                   //添加一个定时器
                   var timer=setInterval(function(){
                       $("#send-recode").html(num+'s后重新发送');
                       if(num == 0){
                           flag=true;
                           clearInterval(timer);
                           $("#send-recode").html('重新发送');
                       }
                       num--;
                   },1000);
                    //ajax请求路由,来发送邮箱验证码
                   $.ajax({
                       url:'{{url('/home/sendcode')}}',
                       dataType:'json',
                       data:{user:user},
                       success:function (data) {
                           if (data == null) {
                               alert('服务器繁忙');
                               return;
                           }
                           if (data.status != 0) {
                               alert(data.message);
                               return;
                           }
                       },
                       error:function (xhr, status, error) {
                           console.log(xhr);
                           console.log(status);
                           console.log(error);
                       }
                   });
               }
           }
        });
    </script>
@endsection